<template>
  <li class="item-box">
    <div class="top">
      <div class="text-box">
        <div class="tl cursor-pointer text-16px text-#3477E9! font" @click="onPosition">
          {{ data?.title }}
        </div>
        <div class="tr">{{ makeUnitStr(data) }}</div>
      </div>
      <div class="tag-box">
        <ul>
          <li v-for="(item, index) in tags" :key="index">{{ item }}</li>
        </ul>
      </div>
    </div>
    <div class="bottom cursor-pointer" @click="onCompany">
      <div class="left-box">
        <img :src="avatarUrl" alt="" />
      </div>
      <div class="right-box">
        <div class="rt">{{ data?.companyName }}</div>
        <div class="rb">
          {{ data?.isListed ? `已上市 丨` : '' }} {{ data?.companyScale }}
          {{ data?.industryCodeName ? ` 丨 ${data.industryCodeName}` : '' }}
          {{ data?.address ? ` 丨 ${data.address}` : '' }}
        </div>
      </div>
      <div class="action-box">
        <a-button type="primary" @click.stop="handleOnTouDi" class="w-96"> 一键投递 </a-button>
        <!-- <a-button
          type="primary"
          @click.stop="handleOnTouDi"
          class="w-96"
          :disabled="!data?.judgeSend"
          >{{ data?.judgeSend ? '一键投递' : '已投递' }}</a-button
        > -->
      </div>
    </div>
  </li>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { makeUnitStr } from '@/utils/util';
import { useIsLoginCallback } from '@/hooks';
import { message } from 'ant-design-vue';
import UserService from '@/api/user';
// import UserService from '@/api/user';

const props = defineProps(['data']);
const $emit = defineEmits(['refresh']);
const isLoginCallback = useIsLoginCallback(errorFunc);
const router = useRouter();
const tags = computed(() => {
  const arr = [];
  const data = props.data;
  if (data?.workingYears) {
    arr.push(data.workingYears);
  }
  if (data?.qualification) {
    arr.push(data.qualification);
  }
  // if (data?.plusesCodesNameList && Array.isArray(data.plusesCodesNameList)) {
  //   arr.push(...data.plusesCodesNameList);
  // }
  return arr;
});
const avatarUrl = computed(() => {
  return `https://ui-avatars.com/api/?name=${props.data.companyName}&background=0081ff&color=ffffff&rounded=true&font-size=0.33`;
  // props.data?.logoVisitUrl
});

function onPosition() {
  const data = props.data;
  router.push(`/position/${data.id}`);
}

function onCompany() {
  router.push({
    path: `/company/${props.data.companyId}`,
  });
}

function handleOnTouDi() {
  isLoginCallback(() => {
    onTouDi();
  });
}

async function onTouDi() {
  const jobId = props.data.id;
  const resp = await UserService.seekerSendResume({ jobId });

  if (resp.code === 200) {
    $emit('refresh');
  } else {
    message.error(resp.msg || '操作失败');
  }
}

function errorFunc() {
  message.warn(`请先登录再进行该操作`);
  emitter.emit('open-login');
}
</script>

<style lang="scss" scoped>
.item-box {
  width: 100%;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 10px 0 #d0cbcc80;
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }

  .top {
    height: 86px;
    width: 100%;
    box-sizing: border-box;
    padding: 20px 20px 15px 20px;
    position: relative;
    .text-box {
      height: 20px;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      .tl {
        height: 20px;
        font-size: 16px;
        line-height: 18px;
        overflow: hidden;
        max-width: 50%;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-right: 37px;
        font-weight: 700;
      }
      .tr {
        height: 20px;
        font-size: 16px;
        font-weight: 400;
        color: #d20808;
        line-height: 16px;
      }
    }
    .tag-box {
      ul,
      li {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      ul {
        display: flex;
        margin: -4px;
        font-size: 12px;
        font-family:
          PingFangSC-Regular,
          PingFang SC;
        font-weight: 400;
        color: #666666;
        flex-wrap: wrap;
      }
      li {
        height: 20px;
        background: #f8f8f8;
        border-radius: 2px;
        text-align: center;
        line-height: 20px;
        box-sizing: border-box;
        padding: 0 10px;
        margin: 4px;
        word-break: keep-all;
      }
    }
    .des-box {
      position: absolute;
      right: 20px;
      top: 23px;
      font-size: 12px;
      font-family:
        PingFangSC-Regular,
        PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 12px;
    }
  }
  .bottom {
    border-radius: 0px 0px 8px 8px;
    overflow: hidden;
    box-sizing: border-box;
    padding: 15px 20px 16px 20px;
    display: flex;
    position: relative;
    background: #eff3fd;
    .left-box {
      border-radius: 8px;
      margin-right: 12px;
      width: 40px;
      height: 40px;
      box-shadow: 0 2px 5px 0 #c9e4fa57;
      border: 1px solid #ffffff;
      z-index: 1;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .right-box {
      z-index: 1;
      .rt {
        font-size: 14px;
        font-weight: 400;
        color: #222222;
        line-height: 14px;
        margin-bottom: 12px;
      }
      .rb {
        font-size: 12px;
        font-weight: 400;
        color: #757575;
        line-height: 12px;
      }
    }
    .action-box {
      z-index: 1;
      position: absolute;
      bottom: 16px;
      right: 20px;
      .w-96 {
        width: 96px;
      }
      :deep(.ant-btn) {
        & + .ant-btn {
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
